<template>
  <pageLayout>
    <template v-slot:header>
      <el-button size="small" type="primary" @click="submitForm('ruleForm', ruleForm)">保存</el-button>
      <el-button size="small" plain @click="backList">返回</el-button>
    </template>
    <template>
      <el-form size="small" label-width="100px" :rules="rules" ref="ruleForm" :model="ruleForm">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="供应商名字" prop="name">
              <el-input v-model="ruleForm.name" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="合同" prop="contract">
              <el-input v-model="ruleForm.contract" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="采购优先级" prop="level" style="margin-left: 30px;">
              <el-select v-model="ruleForm.level" placeholder="请选择" @change="searchSelect(options.value)">
                <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开票地址" prop="ticket_address">
              <el-input v-model="ruleForm.ticket_address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款条件" prop="pay_condition">
              <el-input v-model="ruleForm.pay_condition"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="负责人" prop="director">
              <el-input v-model="ruleForm.director"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="ruleForm.contacts"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="社会信用码" prop="code">
              <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="成立日期" prop="establishment">
              <el-date-picker v-model="ruleForm.establishment" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="注册资金" prop="amount">
              <el-input v-model="ruleForm.amount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="开户银行" prop="bank">
              <el-select v-model="ruleForm.bank" placeholder="请选择" @change="backSelect(bank.value)">
                <el-option v-for="item in bank" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="产品类型" prop="type">
              <el-select v-model="ruleForm.type" placeholder="请选择" @change="productType(type.value)">
                <el-option v-for="item in type" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="设备状态" prop="devices_state">
              <el-select v-model="ruleForm.devices_state" placeholder="请选择" @change="equipmentType(equipment.value)">
                <el-option v-for="item in equipment" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="商品产地" prop="production">
              <el-input v-model="ruleForm.production"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="ruleForm.remark" />
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </pageLayout>
</template>
<script>
import { getPurchaseEdit } from '../../../apis/purchase'
export default {
  data() {
    return {
      //用户数据
      userInfo: {
        user_name: '',
        user_id: ''
      },
      rows: {
        id: "",
        level: "",
        ticket_address: "",
        pay_condition: "",
        director: "",
        contacts: "",
        phone: "",
        bank: "",
        type: "",
        devices_state: "",
        production: "",
        remark: ""
      },
      //传递的双向绑定表单数据
      ruleForm: {
        id: "",
        level: "",
        ticket_address: "",
        pay_condition: "",
        director: "",
        contacts: "",
        phone: "",
        bank: "",
        type: "",
        devices_state: "",
        production: "",
        remark: ""
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
      //表单校验规则
      rules: {
        name: [{ required: true, message: "供应商名字必须输入", trigger: 'blur' }],
        contract: [{ required: true, message: "合同必须输入", trigger: 'blur' }],
        level: [{ required: true, message: "采购优先级必须选择", trigger: 'blur' }],
        ticket_address: [{ required: true, message: "开票地址必须选择", trigger: 'blur' }],
        pay_condition: [{ required: true, message: "付款条件必须选择", trigger: 'blur' }],
        director: [{ required: true, message: "负责人必须输入", trigger: 'blur' }],
        contacts: [{ required: true, message: "联系人必须输入", trigger: 'blur' }],
        phone: [{ required: true, message: "联系电话必须输入", trigger: 'blur' }],
        code: [{ required: true, message: "社会信用码必须输入", trigger: 'blur' }],
        establishment: [{ required: true, message: "日期必须输入", trigger: 'blur' }],
        amount: [{ required: true, message: "资金必须输入", trigger: 'blur' }],
        bank: [{ required: true, message: "开户银行必须输入", trigger: 'blur' }],
        type: [{ required: true, message: "产品类型必须输入", trigger: 'blur' }],
        devices_state: [{ required: true, message: "设备状态必须输入", trigger: 'blur' }],
        production: [{ required: true, message: "商品产地必须输入", trigger: 'blur' }],
      },
      //采购优先级选项
      options: [{
        value: '最优',
        label: '选项1'
      }, {
        value: '优等',
        label: '选项2'
      }, {
        value: '良好',
        label: '选项3'
      }, {
        value: '一般',
        label: '选项4'
      }],
      //银行选项
      bank: [{
        value: '工商银行',
        label: '选项1'
      }, {
        value: '建设银行',
        label: '选项2'
      }, {
        value: '农业银行',
        label: '选项3'
      }, {
        value: '中国银行',
        label: '选项4'
      }, {
        value: '招商银行',
        label: '选项5'
      }, {
        value: '民生银行',
        label: '选项6'
      }, {
        value: '华夏银行',
        label: '选项7'
      }, {
        value: '成都银行',
        label: '选项8'
      }],
      //产品类型
      type: [{
        value: '成品',
        label: '选项1'
      }, {
        value: '半成品',
        label: '选项2'
      }, {
        value: '原料',
        label: '选项3'
      }, {
        value: '零部件',
        label: '选项4'
      }, {
        value: '代工品',
        label: '选项5'
      }],
      //设备状态
      equipment: [{
        value: '全新',
        label: '选项1'
      }, {
        value: '9成新',
        label: '选项2'
      }, {
        value: '8成新',
        label: '选项3'
      }, {
        value: '7成新',
        label: '选项4'
      }, {
        value: '6成新',
        label: '选项5'
      }],
    }
  },
  methods: {
    async submitForm(ruleForm, y) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
        } else {
          console.log('error submit!!');
          return false;
        }
      })
      let editResult = await getPurchaseEdit(this.ruleForm)
      console.log(editResult)
      if (editResult.code === 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      }else{
        this.$message.error(`错了哦${editResult.message}`)
      }
    },
    //获取当前选中的采购优先级
    searchSelect(label) {
      console.log(label)
      this.ruleForm.level = label
    },
    //银行
    backSelect(label) {
      this.ruleForm.bank = label
    },
    //产品类型
    productType(label) {
      this.ruleForm.type = label
    },
    equipmentType(label) {
      this.ruleForm.devices_state = label
    },
    backList() {
      this.$router.push('/supplier/list')
    }
  },
  mounted() {
    // this.ob = this.$route.params
    this.ruleForm = JSON.parse(sessionStorage.getItem('PurchaseEdit')) 
  }
}
</script>
